<script setup lang="ts">
import { onMounted } from 'vue'

const magnetic = {
  container: document.querySelector('.container'),
  lines: 10,
  rows: 10,
  width: 0,
  height: 0,
  init() {
    this.resize()
    this.create_yoyo(30)
  },
  resize() {
    console.warn(JSON.stringify(this.container))
    this.width = this.container?.getBoundingClientRect().width || 0
    this.height = this.container?.getBoundingClientRect().height || 0
  },
  create_yoyo(radius: number) {
    for (let r = 0; r < this.rows; r++) {
      for (let l = 0; l < this.lines; l++) {
        const x = this.width / this.lines * l
        const y = this.height / this.rows * r
        const ball = document.createElementNS('http://wwww.w3.org/2000/svg', 'circle')
        ball.setAttribute('fill', '#17f700')
        ball.setAttribute('cx', String(x))
        ball.setAttribute('cy', String(y))
        ball.setAttribute('r', String(radius))
        this.container?.appendChild(ball)
      }
    }
  },
}
// magnetic.init()
onMounted(() => {
  magnetic.init()
})
</script>

<template>
  <svg class="container" />
</template>

<style scoped lang='scss'>
.container{
    width:50rem;
    height:50rem;
    overflow: visible;
    background-color: red;
}
</style>
